<template>
	<view>
		<u-navbar :border-bottom="false">
			<view class="slot-wrap">
				<u-search placeholder="请输入支行名称" @change="change" @custom="search" @search="search" focus></u-search>
			</view>
		</u-navbar>
		<block v-if="list != ''">
			<view class="list">
				<view class="item" @click="choice(item)" v-for="(item,index) in list" :key="index">{{item.bankName}}</view>
			</view>
			<u-loadmore status="nomore"></u-loadmore>
			<u-gap></u-gap>
		</block>
		<view class="empty" v-else>
			<u-loading :show="loading"></u-loading>
			<u-empty mode="data" :show="empty"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				empty: true,
				list: []
			};
		},
		onLoad(options) {
			this.parentNumber = options.parentNumber
		},
		methods: {
			choice(item) {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					var beforePage = pages[pages.length - 2];
					beforePage.$vm.subBranch = item;
				}
				uni.navigateBack()
			},
			search(e) {
				if (e == '') {
					uni.showToast({
						title: '请输入支行名称',
						icon: "none"
					});
					return
				}
				this.loading = true
				this.empty = false
				this.$u.post('banklist/querySubBank', {
					bankName: e,
					parentNumber: this.parentNumber
				}).then(res => {
					this.loading = false
					if (res == '') {
						this.empty = true
						return
					}
					this.list = res
				})
			},
			change(e) {
				if (e == '') {
					this.loading = false
					this.empty = true
					this.list = []
					return
				}
				this.$u.throttle(this.search(e), 1000)
			}
		}
	}
</script>

<style lang="scss">
	.empty {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list {
		.item {
			// line-height: 100rpx;
			padding: 30rpx 0;
			margin: 0 30rpx;
			border-bottom: 1rpx solid #E1E1E1;

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.slot-wrap {
		width: 100%;
		padding-right: 30rpx;
	}
</style>
